<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<link rel="shortcut icon" th:href="@{/picture/favicon.ico}">
		<link rel="stylesheet" th:href="@{/css/pay/pay-list.css}">
		<script th:src="@{/js/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/axios-0.18.0.js}" type="text/javascript" charset="utf-8"></script>
		<!--<script type="text/javascript" th:src="@{/js/pay/pay-list.js}" charset="utf-8"></script>-->
</head>
<body>
<div class="header">
		<div class="box-center cf">
				<h1 class="logo">
						<a th:href="@{/index}"><img th:src="@{/picture/log2.png}" title="歪风小说"/></a>
				</h1>
				<h3 class="lang">书币充值</h3>
		</div>
</div>
<!-- end 头部 -->

<!-- start 主体 -->
<div class="box-center">
		<div class="main" id="app">
				<!-- start 选择充值方式 -->
				<div class="select-pay-method">
						<!-- start 账号 -->
						<div class="account-wrap">
								<h6>账号</h6>
								<p>
										<img th:src="@{'/user-photo/'+${session.user_reader.nickName}+'/'+${session.user_reader.headImage}}">
										<span th:title="${session.user_reader.nickName}">[[${session.user_reader.nickName}]]</span>
								</p>
						</div>
						<!-- end 账号 -->
				</div>
				<!-- end 选择充值方式 -->

				<!-- start 选择充值方式列表 -->
				<div class="pay-list select-list" id="j-pay-list">
						<h6>充值方式</h6>
						<ul class="cf">
								<!--支付宝-->
								<li class="normal-method act" data-method="1"
								    data-cury-name="¥"
								    data-hand-fee=0 data-rate=100>
										<span class="alipay" data-method="1"><img style="width: 28px;height: 28px"
										                                          th:src="@{/picture/zfb.png}"
										                                          alt=""></span><em
										class="lang">支付宝</em>
										<cite></cite>

								</li>
								<!--微信-->
								<!--<li class="normal-method" data-method="2"
								    data-cury-name="¥"
								    data-hand-fee=0 data-rate=100>
										<span class="we-chat" data-method="2"></span><em class="lang">微信</em>
										<cite></cite>

								</li>-->
						</ul>
				</div>
				<!-- end 选择充值方式列表 -->

				<!-- start 选择充值金额 -->
				<div class="money-list select-list j-normal-list">
						<!-- start 选择Paypal 10 -->
						<ul id="money-list-1" class="cf j_detail_panel hidden">
								<h6>充值金额</h6>

								<li class="act" data-amount="10">
										<p>¥10<span>(1000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="20">
										<p>¥20<span>(2000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="30">
										<p>¥30<span>(3000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="50">
										<p>¥50<span>(5000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="100">
										<p>¥100<span>(10000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="custom" data-amount="">
										<p>其它金额 ¥<input class="item-box" type="tel" placeholder="输入金额"
										                maxlength="5"><span>(<i class="j_coins">0起点币</i>)</span></p>
										<cite></cite>
										<!--<div class="tip">充值金额必须大于或等于1</div>-->
								</li>
								<input class="default-amount-1" type="hidden" value="10">
						</ul>
						<!-- end 选择Paypal 10 -->

						<!-- start 选择Paypal 10 -->
						<ul id="money-list-2" class="cf j_detail_panel ">
								<h6>充值金额</h6>

								<li class="act" data-amount="10" @click="choosePrice(10)">
										<p>¥10<span>(1000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="20" @click="choosePrice(20)">
										<p>¥20<span>(2000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="30" @click="choosePrice(30)">
										<p>¥30<span>(3000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="50" @click="choosePrice(50)">
										<p>¥50<span>(5000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="" data-amount="100" @click="choosePrice(100)">
										<p>¥100<span>(10000起点币)</span>

										</p>
										<cite></cite>
								</li>

								<li class="custom" data-amount="" @click="toDIY()">
										<p>其它金额 ¥<input class="item-box" type="tel" placeholder="输入金额"
										                @change="chooseDIY()"
										                maxlength="5" v-model.number="other_price"><span>(<i
												class="j_coins">{{other_price}}起点币</i>)</span></p>
										<cite></cite>
										<!--<div class="tip">充值金额必须大于或等于1</div>-->
								</li>
								<input class="default-amount-2" type="hidden" value="10">
						</ul>
						<!-- end 选择Paypal 10 -->
				</div>
				<!-- end  选择充值金额 -->

				<!-- start 按钮 -->
				<div class="btn-wrap btn-pay pay-btn-area ">
						<label id="pay" class="blue-btn" href="javascript:" data-method="1" @click="pay">立即支付
								<span class="j_deal_price" v-show="!isDIY">¥{{price}}</span>
								<span class="j_deal_price" v-show="isDIY">¥{{other_price}}</span>
						</label>
						<div class="checkbox-wrap hidden">
				                <span class="lbf-checkbox lbf-checkbox-checked" id="J-agree">
				                    <input id="agrees" type="checkbox" checked/>
				                </span>
								<label><a href="https://passport.yuewen.com/pact.html?mobile=0" target="_blank">我同意《用户服务协议》</a></label>
						</div>
				</div>
				<!-- end 按钮 -->
		</div>
</div>
<!-- end 主体 -->

<div class="mask"></div>
<!-- start 等待支付弹窗 -->
<div class="common-popup pay-process-popup" style="display: none">
		<a class="close iconfont" href="javascript:">&#xe601;</a>
		<h3>等待支付</h3>
		<div class="popup-content">
				<p>请在新打开的页面中完成支付</p>
		</div>
		<div class="popup-btn dib-wrap">
				<a class="blue-btn J_complete" href="javascript:">已完成支付</a>
				<a class="grey-btn close" href="javascript:">关闭</a>
		</div>
</div>
<!-- end 等待支付弹窗 -->
<!-- start 登录错误提示 -->
<div id="loginAlert" class="common-popup" style="display: none">
		<a class="close iconfont" href="javascript:">&#xe601;</a>
		<div class="popup-content">
				<p class="msg">为了您的充值安全，请返回重试</p>
		</div>
		<div class="popup-btn dib-wrap">
				<a class="blue-btn close" href="javascript:">确认</a>
				<a class="grey-btn close" href="javascript:">关闭</a>
		</div>
</div>
<!-- end 登录错误提示 -->
<!-- start 登录错误提示 -->
<div id="smsMessageAlert" class="common-popup" style="display: none">
		<a class="close iconfont" href="javascript:">&#xe601;</a>
		<div class="popup-content">
				<p id="smsContent" style="padding:20px;"></p>
		</div>
		<div class="popup-btn dib-wrap">
				<a class="blue-btn close" href="javascript:">确认</a>
				<a class="grey-btn close" href="javascript:">关闭</a>
		</div>
</div>
<!-- end 登录错误提示 -->
<div id="atmEmailAlert" class="common-popup" style="display: none">
		<a class="close iconfont" href="javascript:">&#xe601;</a>
		<div class="popup-content">
				<p class="msg"></p>
		</div>
		<div class="popup-btn dib-wrap">
				<a id="atmSaveEmail" class="blue-btn" href="javascript:">确认</a>
				<a class="grey-btn close" href="javascript:">关闭</a>
		</div>
</div>
<!-- end 等待支付弹窗 -->

<script type="text/javascript">
		var app = new Vue({
				el: "#app",
				data: {
						price: 10,
						other_price: "",
						isDIY: false
				}, methods: {
						choosePrice: function (money) {
								//取消自定义金额框的选中及初始化自定义金额
								app.isDIY = false;
								app.other_price = "";

								app.price = money;
								$("#money-list-2 li.act").removeClass("act");
								var list = $("#money-list-2 li");
								var plist = $("#money-list-2 li p");
								for (var i = 0; i < list.length; i++) {
										var text = plist.eq(i).text().split("(")[0].replace("¥", "")
										if (text == money) {
												list.eq(i).addClass("act");
												break;
										}
								}
						},
						chooseDIY: function () {
								app.price = app.other_price;
						},
						toDIY: function () {
								$("#money-list-2 li.act").removeClass("act");
								$(".custom").addClass("act");
								app.isDIY = true;
						},
						pay:function () {

								var price = app.isDIY?app.other_price:app.price;
								var describe = "充值"+price+"元";
								axios.post('/wfRead/payment/goAlipay?price='+price+"&describe="+describe)
										.then(function (response) {//正常
												$(".mask").html(response.data)
										})
										.catch(function (err) {//请求失败
												console.log(err);
												alert(response.err)
										});
						}
				}
		})
</script>
</body>
</html>